<template>
	<view class="wrapper collection collection-safe-area">
		<!--头部-->
		<view class="collection-header main-flex">
			<view class="collection-header-l">
				共<text class="price">{{tableList.length}}</text>件商品
			</view>
			<view class="collection-header-r">
				<text v-show="isSuccess" @click="closeAll()">完成</text>
				<text v-show="!isSuccess" @click="openAll()">管理</text>
			</view>
		</view>
		<!--内容-->
		<view class="collection-content">
			<view class="collection-list">
				<checkbox-group @change="checkboxChange">
					<uni-swipe-action>
						<view class="collection-item" v-for="(item, index) in tableList" :key="item.id">
							<uni-swipe-action-item
							 :right-options="options"
							 :autoClose="false"
							 :show="item.show"
								@change="changeSwipe(item, index, $event)"
								@click="clickSwipe(item, index, $event)">
								<view class="collection-item-content main-flex" :style="{
									transform: `translateX(${isSuccess?0:-80}rpx)`
								}">
									<label class="collection-item-check main-flex" @click="checkOne(item, index)">
										<uni-icons :type="item.checked ? 'checkbox-filled' : 'circle'" size="30" :color="item.checked ? '#e3230e' : '#d1d1d1'"></uni-icons>
										<view class="checkbox"><checkbox :value="`${item.id}`" :checked="item.checked" /></view>
									</label>
									<view @click="goGoods(item, index)" class="collection-item-goods main-flex-item main-flex">
										<view class="collection-item-goods-img">
											<!-- <image
												class="collection-item-goods-img-url"
												mode="aspectFill"
												:src="imgUrl(item.productImg)"></image> -->
											<lazy-load
												:image="imgUrl(item.productImg)"
												loading-img="/static/images/loading.png"
												error-img="/static/images/error.png"
												img-mode="widthFix">
											</lazy-load>
										</view>
										<view class="collection-item-goods-r main-flex-item main-flex">
											<view class="collection-item-goods-name">{{item.productName}}</view>
											<view class="collection-item-goods-region">配送区域：{{arrText(setStore.provinceList, item.regionCode)}}</view>
											<view class="collection-item-goods-other main-flex">
												<view class="collection-item-goods-price price">￥{{moneyStr(item.productPrice)}}</view>
												<image class="collection-item-goods-car" @click.stop="chooseGoods(item)" src="/static/images/car.png"></image>
											</view>
										</view>
									</view>
								</view>
							</uni-swipe-action-item>
						</view>
					</uni-swipe-action>
				</checkbox-group>
			</view>
			
			<!--多选取消-->
			<view class="collection-cancel" :class="isSuccess?'collection-cancel-active':''">
				<view class="collection-cancel-box main-flex">
					<view class="collection-cancel-check main-flex" @click="checkAll">
						<uni-icons :type="isCheckedAll ? 'checkbox-filled' : 'circle'" size="30" :color="isCheckedAll ? '#e3230e' : '#d1d1d1'"></uni-icons>
						<view class="collection-cancel-check-text">全选</view>
					</view>
					<view class="collection-cancel-right">
						<button class="ty-button ty-button-confirm collection-cancel-btn" @click="unCollectionAll">取消收藏</button>
					</view>
				</view>
			</view>
			
			<!--加载-->
			<view
				v-if="isNull"
				class="null main-flex">
				<u-empty text="收藏夹是空的哟~，快去收藏吧" icon="/static/images/null.png"></u-empty>
				<view class="null-btn" @click="goBuy">去逛逛</view>
			</view>
			<!-- <view
				v-else
				class="more main-flex">
				<uni-load-more :status="status" />
			</view> -->
		</view>
		
		<!--商品弹窗-->
		<goods-popup
		@close="closeGoods"
		:showGoods="showGoods"
		:goods="goodsInfo"></goods-popup>
		
	</view>
</template>

<script setup>
import { computed, ref, watch } from 'vue';
import { onReady, onLoad, onReachBottom, onShow, onHide } from '@dcloudio/uni-app';
import useUserStore from '@/store/modules/user'
import useSetStore from '@/store/modules/set'
import { collection, delCollection} from "@/api/app_api/user"
import { productInfo } from "@/api/app_api/product"
import { arrText } from "@/utils/ty"
import { throttle, debounce } from '@/uni_modules/uview-plus'
import modal from '@/plugins/modal'

	const userStore = useUserStore()
	const setStore = useSetStore()
	
	// 列表查询
	const tableList = ref([])
	const isLoading = ref(false)
	const status = ref('more')
	const isNull = ref(false)
	const options = ref([{
			text: '取消收藏',
			style: {
				backgroundColor: '#e3230e',
				color: '#FFFFFF',
				fontSize: '24rpx'
			}
		}])
	
	const searchFirst = () => {
		tableList.value = []
		getList()
	}
	
	const getList = () => {
		isLoading.value = true
		uni.showLoading({
			title: '数据加载中...'
		})
		collection().then(res => {
			tableList.value = res.data.map(item => {
				return {
					...item,
					show: 'none'
				}
			}) || []
			// status.value = res.data.length === pageSize.value ? 'loading' : 'no-more'
			isNull.value = tableList.value.length === 0
			isLoading.value = false
			uni.hideLoading()
		}).catch(() => {
			isLoading.value = false
			isNull.value = false
			uni.hideLoading()
		})
	}
	
	// 选择商品
	const showGoods = ref(false)
	const goodsInfo = ref({})
	const chooseGoods = (item) => {
		productInfo({
			sellChannel: userStore.sellChannel,
			productId: item.productId
		}).then(res => {
			if (res.data.status === 1 && res.data.regionCode == userStore.regionCode) {
				showGoods.value = true
				goodsInfo.value = res.data
			} else {
				uni.$u.toast('商品已下架')
			}
		})
	}
	const closeGoods = () => {
		showGoods.value = false
		goodsInfo.value = {}
	}
	
	const changeSwipe = (item, index, e) => {
		if (e !== 'none') {
			tableList.value = tableList.value.map((item, i) => {
				item.show = index == i ? e : 'none'
				return item
			})
		}
	}
	const clickSwipe = (item, index, e) => {
		if (e.index === 0 && e.position === 'right') { // 删除
			delCollectionFun(`${item.id}`)
		}
	}
	
	const goGoods = (item, index) => {
		if (item.show === 'none') {
			uni.navigateTo({
				url: `/pages/goods/index?id=${item.productId}`
			})
		} else {
			tableList.value[index].show = 'none'
		}
	}
	
	// 管理
	const isSuccess = ref(false)
	const openAll = () => {
		isSuccess.value = true
		closeDataAll()
	}
	const closeAll = () => {
		isSuccess.value = false		
		closeDataAll()
	}
	
	const closeDataAll = () => {
		tableList.value = tableList.value.map((item, i) => {
			item.show = 'none' 
			return item
		})
	}
	
	// 选择的收藏
	const chooseCollectionArr = ref([])
	// 选择一个
	const checkOne = (item, index) => {
		tableList.value[index].checked = !tableList.value[index]?.checked
	}
	const checkboxChange = (e) => {
		chooseCollectionArr.value = e.detail.value
		isChooseAll()
	}
	// 全选
	const isCheckedAll = ref(false)
	const checkAll = () => {
		isCheckedAll.value = !isCheckedAll.value
		tableList.value = tableList.value.map(item => {
			return {
				...item,
				checked: isCheckedAll.value
			}
		})
	}
	// 判断是否全选
	const isChooseAll = () => {
		isCheckedAll.value = chooseCollectionArr.value.length === tableList.value.length
	}
	
	// 多选取消
	const unCollectionAll = () => {
		if (chooseCollectionArr.value.length > 0) {
			delCollectionFun(chooseCollectionArr.value.join(','))
		}
	}
	const isDel = ref(false)
	const delCollectionFun = (id) => {
		if (isDel.value) return false
		isDel.value = true
		delCollection({
			id
		}).then(res => {
			const delArr = id.split(',')
			tableList.value = tableList.value.filter(item => delArr.indexOf(`${item.id}`) === -1)
			isNull.value = tableList.value.length === 0
			isDel.value = false
			uni.$u.toast(res.msg)
		}).catch(err => {
			isDel.value = false
		})
	}
	
	// 去看看
	const goBuy = () => {
		uni.switchTab({
			url: '/pages/category/category'
		})
	}
	
	onLoad(() => {
		searchFirst()
	})
</script>

<style lang="scss">
	.collection {
		&-safe-area {
			padding-bottom: 96rpx;
		}
		&-header {
			position: fixed;
			width: 100%;
			height: 72rpx;
			background-color: #ffffff;
			padding: 0 20rpx;
			font-size: 28rpx;
			box-sizing: border-box;
			z-index: 10;
			&-r {
				margin-left: auto;
			}
		}
		&-content {
			padding: 72rpx 20rpx 20rpx;
		}
		&-item {
			background-color: #ffffff;
			border-radius: 20rpx;
			overflow: hidden;
			margin-top: 20rpx;
			&-content {
				width: 790rpx;
				align-items: flex-start;
				padding: 20rpx 0;
				transition: all .3s;
			}
			&-check {
				position: relative;
				width: 80rpx;
				height: 160rpx;
				padding-right: 6rpx;
				box-sizing: border-box;
				justify-content: flex-end;
				.checkbox {
					position: absolute;
					left: -300px;
					opacity: 0;
				}
			}
			:deep(.uni-swipe_button) {
				position: relative;
				width: 120rpx;
				height: 100%;
				box-sizing: border-box;
				.uni-swipe_button-text {
					position: absolute;
					top: 50%;
					left: 50%;
					-webkit-transform: translate(-50%, -50%);
					transform: translate(-50%, -50%);
					text-align: center;
				}
			}
			&-goods {
				align-items: flex-start;
				margin-left: 20rpx;
				&-img {
					width: 160rpx;
					height: 160rpx;
					border-radius: 10rpx;
					overflow: hidden;
					&-url {
						width: 100%;
						height: 100%;
					}
				}
				&-r {
					min-height: 160rpx;
					flex-direction: column;
					justify-content: space-between;
					padding: 0 20rpx;
				}
				&-name {
					width: 100%;
					font-size: 26rpx;
					font-weight: 600;
				}
				&-region {
					width: 100%;
					font-size: 24rpx;
					color: $text-light;
					margin-top: 4rpx;
				}
				&-other {
					width: 100%;
					margin-top: 4rpx;
				}
				&-price {
					font-size: 26rpx;
					font-weight: 600;
				}
				&-car {
					width: 48rpx;
					height: 48rpx;
					margin-left: auto;
				}
			}
		}
		&-cancel {
			position: fixed;
			width: 100%;
			left: 0;
			bottom: -100%;
			padding: 0 20rpx;
			background-color: #ffffff;
			box-sizing: border-box;
			transition: all .3s;
			&-active {
				opacity: 1;
				bottom: 0px;
			}
			&-box {
				width: 100%;
				height: 96rpx;
			}
			&-check {
				&-text {
					margin-left: 10rpx;
					font-size: 32rpx;
					line-height: 1;
				}
			}
			&-right {
				margin-left: auto;
			}
			&-btn {
				width: 160rpx;
				height: 60rpx;
				margin: 0;
				padding: 0;
				font-size: 24rpx;
				justify-content: center;
				border-radius: 100rpx;
			}
		}
	}
</style>
